import React, { Component } from 'react';
import { Select } from 'antd';

class FormSelect extends Component {
  static defaultProps = {
    onChange: () => {},
  };

  renderStaticOptions = () => {
    const options = this.props.getData('datasource');
    if (!Array.isArray(options)) {
      return null;
    }
    return options.map(option => (
      <Select.Option key={option} value={option}>
        {option}
      </Select.Option>
    ));
  };

  render() {
    const { getStyle, getData, onChange, value } = this.props;
    const multiple = getData('multiple');
    const defaultValue = getData('defaultValue');
    const placeholder = getData('placeholder');
    let mode;
    if (multiple) {
      mode = 'multiple';
    }
    return (
      <Select
        placeholder={placeholder}
        mode={mode}
        style={{ ...getStyle(), width: '100%', height: '100%' }}
        defaultValue={defaultValue}
        value={value || defaultValue}
        onChange={onChange}
      >
        {this.renderStaticOptions()}
      </Select>
    );
  }
}

export default FormSelect;
